<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>商品分类管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css?v=1">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-tree__empty-block {
            height: 0;
            min-height: 343px;
        }
        .el-table__empty-block {
            height: 0;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">商品分类管理</h1>
                <!--<el-row style="margin-bottom: 10px">-->
                    <!--<el-button type="primary" @click.native.prevent="addRootType">添加</el-button>-->
                <!--</el-row>-->
                <el-row :gutter="20" style="position: static">
                    <el-col :span="4">
                        <el-tree :data="funcTree" :render-content="renderContent" :expand-on-click-node="false" :load="loadChildren" @node-click="getDetail" lazy :highlight-current="true" node-key="treeNodeId" :props="funcTreeProps"></el-tree>
                    </el-col>
                    <el-col :span="20">
                        <el-card class="box-card">
                            <el-tabs v-model="activeName" type="card">
                                <el-tab-pane label="基本信息" name="first">
                                    <div>
                                        <el-form :model="selectFunc">
                                            <el-form-item label="名称" :label-width="formLabelWidth">
                                                <el-input v-model="selectFunc.name" :disabled="!isPermission('itemType:edit', user.permissions)" auto-complete="off" placeholder="名称"></el-input>
                                            </el-form-item>
                                            <el-form-item label="描述信息" :label-width="formLabelWidth">
                                                <el-input type="textarea" :rows="2" :disabled="!isPermission('itemType:edit', user.permissions)" v-model="selectFunc.desc"></el-input>
                                            </el-form-item>
                                        </el-form>
                                        <div style="text-align: center" v-if="isPermission('itemType:edit', user.permissions)">
                                            <el-button type="primary" @click.native.prevent="saveEdit">保存</el-button>
                                            <el-button @click.native.prevent="cancelEdit">取消</el-button>
                                        </div>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="属性信息" name="second">
                                    <el-card class="box-card">
                                        <div slot="header" class="clearfix" v-if="isPermission('itemType:addProps', user.permissions)">
                                            <el-button type="primary" @click.native.prevent="addProperty">添加</el-button>
                                        </div>
                                        <div>
                                            <el-table
                                                    :data="attributeList"
                                                    border
                                                    style="width: 100%">
                                                <el-table-column
                                                        type="index"
                                                        label="序号"
                                                        width="80">
                                                </el-table-column>
                                                <el-table-column
                                                        prop="name"
                                                        label="属性名"
                                                        width="180">
                                                </el-table-column>
                                                <el-table-column
                                                        prop="require"
                                                        align="center"
                                                        :formatter="formatterRe"
                                                        label="是否必填">
                                                </el-table-column>
                                                <el-table-column
                                                        align="center"
                                                        label="操作"
                                                        inline-template>
                                                    <div style="margin-left: -10px">
                                                        <el-dropdown>
                                                            <el-button size="small" type="primary">
                                                                操作</i>
                                                            </el-button>
                                                            <el-dropdown-menu slot="dropdown" align="center">
                                                                <el-dropdown-item><el-button size="mini" type="primary" @click.native.prevent="editProperty(row)">编辑</el-button></el-dropdown-item>
                                                                <el-dropdown-item><el-button size="mini" type="primary" @click.native.prevent="deleteProperty(row)">删除</el-button></el-dropdown-item>
                                                            </el-dropdown-menu>
                                                        </el-dropdown>
                                                    </div>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-card>
                                    <el-dialog :title="propertyTitle" v-model="dialogFormVisible">
                                        <el-form :model="propertyForm" label-width="80px">
                                            <el-form-item label="属性名">
                                                <el-input v-model="propertyForm.name" auto-complete="off"></el-input>
                                            </el-form-item>
                                            <el-form-item label="是否必填">
                                                <el-switch on-text="" off-text="" v-model="propertyForm.require" style="margin-top: 5px"></el-switch>
                                            </el-form-item>
                                        </el-form>
                                        <div slot="footer" class="dialog-footer">
                                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                                            <el-button type="primary" @click.native.prevent="saveProperty">确 定</el-button>
                                        </div>
                                    </el-dialog>
                                </el-tab-pane>
                            </el-tabs>
                        </el-card>
                    </el-col>
                </el-row>
                <el-dialog title="新增分类" v-model="typeDialog">
                    <el-form :model="typeForm" label-width="80px">
                        <el-form-item label="名称">
                            <el-input v-model="typeForm.name" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="描述">
                            <el-input type="textarea" v-model="typeForm.desc"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="typeDialog = false">取 消</el-button>
                        <el-button type="primary" @click.native.prevent="saveType">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入列表数据 -->
<script src="/static/js/dist/list.js"></script>

<!-- 引入vue组件 -->
<script src="/static/js/dist/vueComponents.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        methods: {
            renderContent(h, node) {
                return h('yiqi-tree-node-content', {props: {title: node.data.name, node: node, rightMenuList: this.rightMenuList}})
            },
            getNode (id, resolve) {
                let that = this;
                this.http("/item/type/list", {pid: id}, function (res) {
                    if (res.status === 200) {
                        resolve(res.data.list);
                    } else {
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            loadChildren (node, resolve) {
                if (node.data.id === undefined) {
                    this.getNode(0, resolve);
                } else {
                    this.getNode(node.data.id, resolve);
                }
            },
            getPropertyList (id) {
                let that = this
                let loading = this.$loading({fullscreen: true, lock: true, text: '保存中'});
                this.http("/item/type/property/list", {typeId: id}, function (res) {
                    if (res.status === 200) {
                        that.attributeList = res.data.list;
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            getDetail (o, n, s) {
                if (window.event.target.localName === "li") { // 当点击右键菜单时，不获取详情，直接返回
                    let index = $(window.event.target).attr("data-id");
                    $(".context-menu").hide();
                    if (index === "add") {
                        this.addType(o);
                    } else if (index === "delete") {
                        this.deleteType(o);
                    }
                    return;
                }
                this.editNode = o;
                this.selectFunc = {
                    id: o.id,
                    pid: o.pid,
                    name: o.name,
                    desc: o.desc
                }
                this.getPropertyList(o.id);
            },
            saveEdit () {
                let that = this;
                this.http("/item/type/update", this.selectFunc, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.$alert('编辑成功', '提示', {
                            confirmButtonText: '确定',
                            callback: function () {
                                location.reload();
                            }
                        });
                    } else {
                        loading.close();
                        that.$alert('编辑失败', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('编辑失败', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            cancelEdit () {
                let o = this.editNode;
                this.selectFunc = {
                    id: o.id,
                    pid: o.pid,
                    name: o.name,
                    desc: o.desc
                }
            },
            formatterRe (row, column) {
                let require = row.require;
                if (require === 0) {
                    return '否';
                } else {
                    return '是';
                }
            },
            addProperty () {
                this.propertyTitle = '添加商品分类属性';
                this.propertyForm = {
                    typeId: this.editNode.id,
                    name: '',
                    require: false
                }
                this.dialogFormVisible = true;
            },
            editProperty (row) {
                this.propertyTitle = '编辑商品分类属性';
                this.propertyForm = {
                    id: row.id,
                    typeId: this.editNode.id,
                    name: row.name,
                    require: row.require == 1,
                    propertyId: row.propertyId
                }
                this.dialogFormVisible = true;
            },
            saveProperty () {
                let that = this;
                let url = '';
                let tipSuccess = "";
                let tipError = "";
                let loading = this.$loading({fullscreen: true, lock: true});
                let obj = {};
                if (this.propertyForm.id !== undefined) {
                    obj = {
                        id: this.propertyForm.id,
                        typeId: this.propertyForm.typeId,
                        name: this.propertyForm.name,
                        require: this.propertyForm.require ? 1 : 0,
                        propertyId: this.propertyForm.propertyId
                    }
                    url = "/item/type/property/update";
                    tipSuccess = "编辑成功";
                    tipError = "编辑失败";
                } else {
                    obj = {
                        typeId: this.propertyForm.typeId,
                        name: this.propertyForm.name,
                        require: this.propertyForm.require ? 1 : 0
                    }
                    url = "/item/type/property/add";
                    tipSuccess = "新增成功";
                    tipError = "新增失败";
                }
                this.http(url, obj, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.dialogFormVisible = false;
                        that.$alert(tipSuccess, '提示', {
                            confirmButtonText: '确定',
                            callback: function () {
                                that.getPropertyList(that.editNode.id);
                            }
                        });
                    } else {
                        loading.close();
                        that.$alert(tipError, '提示', {
                            confirmButtonText: '确定'
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert(tipError, '提示', {
                        confirmButtonText: '确定'
                    });
                })
            },
            deleteProperty (row) {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/item/type/property/delete", {id: row.id, propertyId: row.propertyId}, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.$alert("删除成功", '提示', {
                            confirmButtonText: '确定',
                            callback: function () {
                                that.getPropertyList(that.editNode.id);
                            }
                        });
                    } else {
                        loading.close();
                        that.$alert("删除失败", '提示', {
                            confirmButtonText: '确定'
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert("删除失败", '提示', {
                        confirmButtonText: '确定'
                    });
                })
            },
            addType (node) {
                this.typeForm = {
                    pid: node.id,
                    name: '',
                    desc: ''
                }
                this.typeDialog = true;
            },
            addRootType () {
                this.typeForm = {
                    pid: 0,
                    name: '',
                    desc: ''
                }
                this.typeDialog = true;
            },
            saveType () {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/item/type/add", this.typeForm, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.typeDialog = false;
                        that.$alert('添加成功', '提示', {
                            confirmButtonText: '确定',
                            callback: function () {
                                location.reload();
                            }
                        });
                    } else {
                        loading.close();
                        that.$alert("添加失败", '提示', {
                            confirmButtonText: '确定'
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert("添加失败", '提示', {
                        confirmButtonText: '确定'
                    });
                })
            },
            deleteType (node) {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/item/type/delete", {id: node.id}, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.typeDialog = false;
                        that.$alert('删除成功', '提示', {
                            confirmButtonText: '确定',
                            callback: function () {
                                location.reload();
                            }
                        });
                    } else {
                        loading.close();
                        that.$alert("删除失败", '提示', {
                            confirmButtonText: '确定'
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert("删除失败", '提示', {
                        confirmButtonText: '确定'
                    });
                })
            }
        },
        data: function(){
            return {
                formLabelWidth: '100px',
                activeName: 'first',
                selectFunc: {},
                typeForm: {},
                dialogFormVisible: false,
                funcTree: [],
                propertyForm: {},
                propertyTitle: '添加商品分类属性',
                editNode: {},
                typeDialog: false,
                funcTreeProps: {
                    label: 'name',
                    children: 'children'
                },
                rightMenuList: [
                    {
                        label: '新增子分类',
                        id: 'add'
                    },
                    {
                        label: '删除',
                        id: 'delete'
                    }
                ],
                user: ${(user)!'null'},
                attributeList: [],
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                leftMenuList: list.menu
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>